<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { SubSet } from '@/utils/tools'
// import { useProductStore } from '@/stores/productStore'

// const productStore = useProductStore()

const emits = defineEmits(['handleSku'])

const props = defineProps({
  skus: {
    type: Array,
    default: () => [],
  },
  specs: {
    type: Array,
    default: () => [],
  },
})

let dictionary: any = {}

const changeStatus = (item: any, value: any) => {
  // console.log('current specs',item);
  
  // console.log('status：', value.disabled)
  if (value.disabled) return
  if (value.selected) {
    value.selected = false
  } else {
    item.values.forEach((val: any) => (val.selected = false))
    value.selected = true
  }
  console.log(props.specs);
  
  updateDisabledStatus(props.specs, dictionary)
  const skuObj = ref<any>({})
  const index = getSelectedValues(props.specs).findIndex(
    (item: any) => item === undefined
  )

  if (index > -1) {
    console.log('找到了，信息不完整')
  } else {
    console.log('没有找到，信息完整，可以产出 sku 对象')
    // 获取 sku 对象
    const key = getSelectedValues(props.specs).join('-')
    const skuIds = dictionary[key]
    // console.log(skuIds)
    // 以 skuId 作为匹配项去 goods.value.skus 数组中找
    skuObj.value = props.skus.find((item: any) => item.id === skuIds[0])
    // console.log('sku 对象为', skuObj.value)
    emits('handleSku', skuObj)
  }
}

// const getPathMap =
const createDictionary = (skus: any) => {
  // console.log(skus)
  const dictionary: any = {}
  const effectiveSkus = skus.filter((sku: any) => sku.stock > 0)
  // console.log(effectiveSkus)

  effectiveSkus.forEach((sku: any) => {
    const selectedValArr = sku.specs.map((item: any) => item.value)
    // console.log(selectedValArr)
    const valueArrSubset = SubSet(selectedValArr)
    // console.log(valueArrSubset)

    valueArrSubset.forEach((item: any) => {
      const key = item.join('-')
      if (dictionary[key]) {
        dictionary[key].push(sku.id)
      } else {
        dictionary[key] = [sku.id]
      }
    })
  })
  // console.log('字典：', dictionary)
  return dictionary
}

const initStatus = (specs: any, dictionary: any) => {
  specs.forEach((spec: any) => {
    spec.values.forEach((value: any) => {
      if (dictionary[value.name]) {
        value.disabled = false
      } else {
        value.disabled = true
      }
    })
  })
}

const getSelectedValues = (specs: any) => {
  // console.log('specs', specs);
  
  const temp: any[] = []
  specs.forEach((spec: any) => {
    const selectedValue = spec.values.find((item: any) => item.selected)
    temp.push(selectedValue ? selectedValue.name : undefined)
  })
  return temp
}

const updateDisabledStatus = (specs: any, dictionary: any) => {
  specs.forEach((spec: any, index: number) => {
    const selectedValues = getSelectedValues(specs)
    // console.log('selectedValues', selectedValues);
    spec.values.forEach((item: any) => {
      selectedValues[index] = item.name
      const key = selectedValues.filter((value: any) => value).join('-')
      // console.log('key', key)
      if (dictionary[key]) {
        item.disabled = false
      } else {
        item.disabled = true
      }
    })
  })
}

onMounted(() => {
  dictionary = createDictionary(props.skus)
  console.log(dictionary)
  initStatus(props.specs, dictionary)
})
</script>

<template>
  <div class="product-sku">
    <dl v-for="item in specs" :key="item.id">
      <dt>
        {{ item.name }}
      </dt>
      <dd>
        <template v-for="value in item.values" :key="value.id">
          <img
            :class="{ selected: value.selected, disabled: value.disabled }"
            v-if="value.thumbnailUrl"
            :src="value.thumbnailUrl"
            :title="value.name"
            @click="changeStatus(item, value)"
          />
          <span
            v-else
            :class="{ selected: value.selected, disabled: value.disabled }"
            @click="changeStatus(item, value)"
          >
            {{ value.name }}
          </span>
        </template>
      </dd>
    </dl>
  </div>
</template>

<style scoped>
.product-sku {
  width: 100%;
  height: 100%;
  padding-top: 20px;
}

.product-sku dl {
  display: flex;
  padding-bottom: 20px;
  align-items: center;
}

.product-sku dt {
  width: 50px;
  color: #999;
}

.product-sku dd {
  flex: 1;
  color: #666;
}

.product-sku dd > img {
  width: 50px;
  height: 50px;
  margin-bottom: 4px;
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
}

.product-sku dd > img.selected {
  border-color: aqua;
}

.product-sku dd > span.selected {
  border-color: aqua;
}

.product-sku dd > img.disabled {
  opacity: 0.6;
  border-style: dashed;
  cursor: not-allowed;
}

.product-sku dd > span.disabled {
  opacity: 0.6;
  border-style: dashed;
  cursor: not-allowed;
}

.product-sku dd > span {
  display: inline-block;
  height: 30px;
  line-height: 28px;
  padding: 0 20px;
  margin-bottom: 4px;
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
}
</style>
